<template>
  <view class="box">
    <!-- 导航栏部分 -->
    <uv-navbar 
      class="bold-title" 
      title="选择牲畜" 
      @leftClick="leftClick" 
      :safeAreaInsetTop="true" 
      :placeholder="true" 
      :height="'44px'" 
    ></uv-navbar>

    <view class="content-area">
      <!-- 搜索栏 -->
      <uv-input
        v-model="searchValue"
        placeholder="输入牲畜名称或IMEI查询"
        prefixIcon="search"
        placeholder-style="#979797"
        prefixIconStyle="font-size: 22px; color: #979797"
        border="none"
        :height="searchBoxHeight"
      ></uv-input>
    </view>

    <!-- 底部按钮部分 -->
    <view class="header">
      <!-- 点击新增按钮执行goToTrace函数 -->
      <button class="add-button" @click="goToTrace">确定注射</button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

// 搜索按钮相关
const searchValue = ref('');
const searchBoxHeight = ref('50px'); // 搜索框高度

// 定义leftClick函数，用于处理导航栏左侧按钮的点击事件，执行返回操作
const leftClick = () => {
  uni.navigateBack();
};

// 定义goToTrace函数，用于处理新增按钮的点击事件
const goToTrace = () => {
  console.log('前往追踪页面');
  // router.push('/trace'); // 取消注释并添加实际路径，用于跳转到追踪页面
};
</script>

<style lang="scss" scoped>
/* 定义整个页面的布局样式 */
.box {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

/* 定义导航栏标题样式 */
.bold-title {
  font-weight: bold;
}

/* 定义内容区域的样式 */
.content-area {
  flex: 1;
  overflow: auto;
  background-color: #f3f5f8;
  padding: 10px;
}

/* 定义底部按钮区域的样式 */
.header {
  background-color: #0bcb75;
}

/* 定义新增按钮的样式 */
.add-button {
  background-color: #0bcb75;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 12rpx;
  width: 100%;
  font-size: 28rpx;
  margin-top: 20rpx;
  position: fixed;
  bottom: 0;
  left: 0;
}

/* 自定义uv-input的样式 */
::v-deep(.uv-input) {
  background-color: white; /* 添加此行来确保白色背景 */
}

::v-deep(.uv-input__inner) {
  height: v-bind(searchBoxHeight);
  line-height: v-bind(searchBoxHeight);
  background-color: white; /* 添加此行来确保白色背景 */

}
</style>